<!--
 * @Description: 
 * @Author: HYH
 * @LastEditors: HYH
 * @LastEditTime: 2022-12-28 16:43:59
-->

<template>
  <div style="margin-bottom: 10px">
    上传图片：<input type="file" @change="e => onChange(e.target)" />
  </div>

  <button @click="toBase64">base64</button>
  <button @click="test">test</button>
  <img :src="imgSrc" alt="" />
</template>

<script setup lang="ts">
import testImg from './img.png'
import { useFile } from '@/utils/useFile'

const { byCanvas, byBlob } = useFile()
const imgSrc = ref('')
imgSrc.value = testImg
const onChange = (file: any) => {
  const files = file.files[0]
  const src = URL.createObjectURL(files)
  imgSrc.value = src
}

const toBase64 = async () => {
  byBlob(imgSrc.value)
}

const test = () => {
  byCanvas(imgSrc.value)
}
</script>
<style lang="scss" scoped></style>
